﻿@using Microsoft.Web.Mvc
@model SMECustomerWebsite.Models.ViewModels.ReduceRateFee.CustomerInfoViewModel
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Đề xuất giảm lãi/phí cho khách hàng</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                @if (!string.IsNullOrEmpty(Request.QueryString["cif"]))
                {
                    <div class="col-md-5 col-sm-5 col-xs-12 profile_left">
                        @Html.Partial("ReduceCustomerInfo", Model.Customer.custInfo)
                        @Html.Action("ReduceFinanceInfo", "ReduceRateFee", new { cif = Model.Customer.custInfo.Cif })
                        @Html.Action("ReduceBadbankInfo", "ReduceRateFee", new { cif = Model.Customer.custInfo.Cif })
                        @*@Html.Partial("ReduceProductHoldingInfo", Model)*@
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-12">
                        @if (Model.Customer.custToiInfo != null)
                        {
                            @Html.Action("ReduceLimitInfo", "ReduceRateFee", new { cif = Model.Customer.custInfo.Cif })
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Lợi nhuận khách hàng</h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li>
                                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <div id="toi_graph_bar" style="width:100%; height:280px;"></div>
                                </div>
                            </div>
                        }

                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Thông tin đề xuất</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">

                                <div class="form-horizontal" role="tabpanel" data-example-id="togglable-tabs">

                                    @{
                    var currentStep = Model.InputStep.Steps[Model.InputStep.CurrentStepIndex];
                                    }
                                    @using (Html.BeginForm())
                                    {
                                        @Html.Hidden("wizard", new MvcSerializer().Serialize(Model.InputStep))
                                        @Html.Hidden("StepType", Model.InputStep.Steps[Model.InputStep.CurrentStepIndex].GetType())
                                <!-- Smart Wizard -->
                                        @*<p>This is a basic form wizard example that inherits the colors from the selected scheme.</p>*@
                                        <div id="wizard_reduce" class="form_wizard wizard_horizontal">
                                            <ul class="wizard_steps">
                                                <li>
                                                    <a href="#step-1">
                                                        <span class="step_no">1</span>
                                                        <span class="step_descr">
                                                            Step 1<br />
                                                            <small>Nhu cầu sử dụng sản phẩm của khách hàng</small>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-2">
                                                        <span class="step_no">2</span>
                                                        <span class="step_descr">
                                                            Step 2<br />
                                                            <small>Đề xuất của đơn vị kinh doanh</small>
                                                        </span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-3">
                                                        <span class="step_no">3</span>
                                                        <span class="step_descr">
                                                            Step 3<br />
                                                            <small>Cam kết của đơn vị kinh doanh</small>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div id="step-1">
                                                @Html.Partial("ReduceStep1", Model.InputStep.Steps[0])
                                            </div>
                                            <div id="step-2">
                                                @Html.Partial("ReduceStep2", Model.InputStep.Steps[1])
                                            </div>
                                            <div id="step-3">
                                                @Html.Partial("ReduceStep3", Model.InputStep.Steps[2])
                                            </div>
                                        </div>
                    <!-- End SmartWizard Content -->
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="x_content form-horizontal form-label-left">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">
                                @SMECustomerWebsite.Core.Resources.Resource.CifHeader<span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">

                                <select class="form-control" id="custCif">
                                    <option value="3620194" selected="selected">Search By Name</option>
                                </select>
                            </div>
                        </div>
                    </div>
                }

            </div>
        </div>
    </div>
</div>

@section scripts
{
    @if (!string.IsNullOrEmpty(Request.QueryString["cif"]))
    {
         <!-- jQuery Smart Wizard -->
        <script src="~/Scripts/vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
        <script>
    $(document).ready(function () {
        $('#wizard_reduce').smartWizard({
            // Properties
            selected: @Model.InputStep.CurrentStepIndex,
                    keyNavigation: false, // Enable/Disable key navigation(left and right keys are used if enabled)
                    enableAllSteps: false,  // Enable/Disable all steps on first load
                    transitionEffect: 'slide', // Effect on navigation, none/fade/slide/slideleft
                    contentURL: null, // specifying content url enables ajax content loading
                    contentURLData: null, // override ajax query parameters
                    contentCache: true, // cache step contents, if false content is fetched always from ajax url
                    cycleSteps: false, // cycle step navigation
                    enableFinishButton: true, // makes finish button enabled always
                    hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead
                    errorSteps: [],    // array of step numbers to highlighting as error steps
                    labelNext: 'Next', // label for Next button
                    labelPrevious: 'Previous', // label for Previous button
                    labelFinish: 'Finish',  // label for Finish button
                    noForwardJumping: false,
                    ajaxType: 'POST',
                    // Events
                    onLeaveStep: null, // triggers when leaving a step
                    onShowStep: null,  // triggers when showing a step
                    onFinish: null,  // triggers when Finish button is clicked
                    includeFinishButton: true,   // Add the finish button
                    reverseButtonsOrder: true, //shows buttons ordered as: prev, next and finish
                });

                $('.buttonNext').addClass('btn btn-success');
                $('.buttonPrevious').addClass('btn btn-primary');
                $('.buttonFinish').addClass('btn btn-warning');
        
                var visibleColumn = [0];
                var tablelimit = $('#reduce_rate_limit_info').DataTable({
                    //"order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    bFilter: false,
                    bInfo: false,
                    bPaginate: false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    "sAjaxSource": '@Url.Action("ReduceLimitInfoData")' + '?cif=@Model.Customer.custInfo.Cif',
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns":  [
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "DAO", "bSortable": false },
                        { "sName": "MSBO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false }],
                    "columnDefs": [{
                        "visible": false, "targets": visibleColumn
                    }],
                    "drawCallback": function (settings) {
                        var api = this.api();
                        var rows = api.rows({ page: 'current' }).nodes();
                        var last = null;

                        api.column(0, { page: 'current' }).data().each(function (group, i) {
                            if (last !== group) {
                                $(rows).eq(i).before(
                                    '<tr class="smes_parent"><td colspan="5">' + group + '</td></tr>'
                                );
                                last = group;
                            }
                        });
                        $('table.custom_table th').removeClass().addClass('column-title');
                    }
                });

                var tablefinance = $('#reduce_rate_finance_info').DataTable({
                    //"order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    bFilter: false,
                    bInfo: false,
                    bPaginate: false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    rowsGroup: [0, 1, 2,3],
                    "sAjaxSource": '@Url.Action("ReduceFinanceInfoData")' + '?cif=@Model.Customer.custInfo.Cif',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns":  [
                { "sName": "DAO", "bSortable": false },
                { "sName": "MSBO", "bSortable": false },
                    { "sName": "CIF", "bSortable": false },
                    { "sName": "NAME", "bSortable": false },
                    { "sName": "VPB INDUSTRY", "bSortable": false }],
            "drawCallback": function (settings) {
                $('table.custom_table th').removeClass().addClass('column-title');
            }
        });
    });
        </script>
        <!-- ECharts -->
        <script src="~/Scripts/vendors/echarts/dist/echarts.min.js"></script>
        <!-- jQuery Tags Input -->

    <!-- bootstrap-daterangepicker -->
        <script src="~/scripts/datepicker/moment/moment.min.js"></script>
        <script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script>
        <!-- /jQuery Smart Wizard -->
        if (Model.Customer.custToiInfo != null)
        {
            //bar chart
            <script>
                var cb = function (start, end, label) {
                    $('#range_time_reduce').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                };
                var optionSet1 = {
                    startDate: moment(),
                    endDate: moment(),
                    showDropdowns: true,
                    showWeekNumbers: true,
                    timePicker: false,
                    timePickerIncrement: 1,
                    timePicker12Hour: true,
                    opens: 'left',
                    buttonClasses: ['btn btn-default'],
                    applyClass: 'btn-small btn-primary sme-pick-range-date',
                    cancelClass: 'btn-small',
                    format: 'DD/MM/YYYY',
                    separator: ' - ',
                    locale: {
                        applyLabel: 'OK',
                        cancelLabel: 'Clear',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                    }
                };
                $('#range_time_reduce').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
                $('#range_time_reduce').daterangepicker(optionSet1, cb);
                $('#range_time_reduce').on('apply.daterangepicker', function (ev, picker) {
                });
                var theme = {
                    color: ['#26B99A', '#34495E', '#BDC3C7', '#3498DB','#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'],
                    title: {itemGap: 8,textStyle: {fontWeight: 'normal',color: '#408829'}},
                    dataRange: {color: ['#1f610a', '#97b58d']},
                    toolbox: {color: ['#408829', '#408829', '#408829', '#408829']},
                    tooltip: {backgroundColor: 'rgba(0,0,0,0.5)',axisPointer: {type: 'line',lineStyle: {color: '#408829',type: 'dashed'},crossStyle: {color: '#408829'},shadowStyle: {color: 'rgba(200,200,200,0.3)'}}},
                    dataZoom: {dataBackgroundColor: '#eee',fillerColor: 'rgba(64,136,41,0.2)',handleColor: '#408829'},
                    grid: {borderWidth: 0},
                    categoryAxis: {axisLine: {lineStyle: {color: '#408829'}},splitLine: {lineStyle: {color: ['#eee']}}},
                    valueAxis: {axisLine: {lineStyle: {color: '#408829'}},splitArea: {show: true,areaStyle: {color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']}},splitLine: {lineStyle: {color: ['#eee']}}},
                    timeline: {lineStyle: {color: '#408829'},controlStyle: {normal: { color: '#408829' },emphasis: { color: '#408829' }}},
                    k: {itemStyle: {normal: {color: '#68a54a',color0: '#a9cba2',lineStyle: {width: 1,color: '#408829',color0: '#86b379'}}}},
                    map: {itemStyle: {normal: {areaStyle: {color: '#ddd'},label: {textStyle: {color: '#c12e34'}}},emphasis: {areaStyle: {color: '#99d2dd'},label: {textStyle: {color: '#c12e34'}}}}},
                    force: {itemStyle: {normal: {linkStyle: {strokeColor: '#408829'}}}},
                    chord: {padding: 4,itemStyle: {normal: {lineStyle: {width: 1,color: 'rgba(128, 128, 128, 0.5)'},chordStyle: {lineStyle: {width: 1,color: 'rgba(128, 128, 128, 0.5)'}}},emphasis: {lineStyle: {width: 1,color: 'rgba(128, 128, 128, 0.5)'},chordStyle: {lineStyle: {width: 1,color: 'rgba(128, 128, 128, 0.5)'}}}}},
                    gauge: {startAngle: 225,endAngle: -45,axisLine: {show: true,lineStyle: {color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],width: 8}},axisTick: {splitNumber: 10,length: 12,lineStyle: {color: 'auto'}},axisLabel: {textStyle: {color: 'auto'}},splitLine: {length: 18,lineStyle: {color: 'auto'}},pointer: {length: '90%',color: 'auto'},title: {textStyle: {color: '#333'}},detail: {textStyle: {color: 'auto'}}},
                    textStyle: {fontFamily: 'Arial, Verdana, sans-serif'}
                };

                var echartBarLine = echarts.init(document.getElementById('toi_graph_bar'), theme);

                echartBarLine.setOption({
                    title: {
                        x: 'center',
                        y: 'top',
                        padding: [0, 0, 20, 0],
                        text: '',
                        textStyle: {
                            fontSize: 15,
                            fontWeight: 'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: false,
                                title: 'Save'
                            }
                        }
                    },
                    calculable: true,
                    legend: {
                        data: ['TOI', 'TOI/DNBQ'],
                        y: 'bottom'
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['@Model.Customer.custToiInfo.Month.AddMonths(-11).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-10).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-9).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-8).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-7).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-6).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-5).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-4).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-3).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-2).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-1).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.ToString("MM/yyyy")']
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLabel: {
                        }
                    }, {
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    series: [{
                        name: 'TOI',
                        type: 'bar',
                        data: [@Model.Customer.custToiInfo.Month1,
                                @Model.Customer.custToiInfo.Month2,
                                @Model.Customer.custToiInfo.Month3,
                                @Model.Customer.custToiInfo.Month4,
                                @Model.Customer.custToiInfo.Month5,
                                @Model.Customer.custToiInfo.Month6,
                                @Model.Customer.custToiInfo.Month7,
                                @Model.Customer.custToiInfo.Month8,
                                @Model.Customer.custToiInfo.Month9,
                                @Model.Customer.custToiInfo.Month10,
                                @Model.Customer.custToiInfo.Month11,
                                @Model.Customer.custToiInfo.Month12],
                    }, {
                        name: 'TOI/DNBQ',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [@Model.Customer.custToiAvgInfo.Month1,
                                @Model.Customer.custToiAvgInfo.Month2,
                                @Model.Customer.custToiAvgInfo.Month3,
                                @Model.Customer.custToiAvgInfo.Month4,
                                @Model.Customer.custToiAvgInfo.Month5,
                                @Model.Customer.custToiAvgInfo.Month6,
                                @Model.Customer.custToiAvgInfo.Month7,
                                @Model.Customer.custToiAvgInfo.Month8,
                                @Model.Customer.custToiAvgInfo.Month9,
                                @Model.Customer.custToiAvgInfo.Month10,
                                @Model.Customer.custToiAvgInfo.Month11,
                                @Model.Customer.custToiAvgInfo.Month12]
                    }]
                });
                $MENU_TOGGLE.on('click', function () {
                    $(window).resize();
                });
            </script>
        }
    }
    else
    {
        <script type="text/javascript">
            $("#custCif").select2({
                ajax: {
                    url: "@Url.Action("GetListCustomer", "CustomerManager")",
                    dataType: 'json',
                    type: "POST",
                    delay: 250,
                    data: function (params) {
                        return {
                            searchText: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data,
                            pagination: {
                            }
                        };
                    },
                    cache: true
                },
                placeholder: "Search By Name",
                allowClear: true,
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page,
            });

            $("#custCif").val(null).trigger("change");
            function formatRepo(repo) {
                if (repo.loading) return repo.text;

                var markup = "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.id + "</div>";

                markup += "<div class='select2-result-repository__description'>" + repo.custName + "</div>";

                markup += "<div class='select2-result-repository__statistics'>" +
                  "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.legalId + "</div>" +
                "</div>" +
                "</div></div>";

                return markup;
            }
            var initSelection = function (elem, cb) {
                console.log(elem)
                return elem
            }
            function formatRepoSelection(repo) {
                if (repo.text != null && repo.text != 'Search By Name') {
                    window.location.href = '/ReduceRateFee/AddNew?cif=' + repo.id;
                }
                return repo.text;
            }

        </script>
    }
}
